<template>
  <div class="settle_form">
    <div class="set_form">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <div class="form_tit">商户信息</div>
        <el-form-item label="联系人" prop="name">
          <el-input class="input_width" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input class="input_width" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="门店名称" prop="shopname">
          <el-input v-model="form.shopname"></el-input>
        </el-form-item>
        <el-form-item class="form_address" label="详细地址" prop="address">
          <el-input class="addr_inp" v-model="form.address"></el-input>
          <i class="addr_icon el-icon-location" @click="mapVisible = true"></i>
        </el-form-item>
        <el-form-item label="经营品类" prop="category">
          <el-cascader
            class="select_width"
            placeholder="请选择品类(可多选)"
            v-model="form.category"
            :options="options"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>

        <div class="form_tit">图片资质</div>
        <el-form-item label="营业执照" prop="licence">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-success="imgSuccess"
            :on-remove="imgRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="卫生许可证" prop="health">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-success="imgSuccess"
            :on-remove="imgRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="门头照" prop="licence">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-success="imgSuccess"
            :on-remove="imgRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="Logo" prop="licence">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-success="imgSuccess"
            :on-remove="imgRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-dialog :visible.sync="imgVisible">
          <img width="100%" :src="previewImg" alt>
        </el-dialog>

        <div class="form_tit">其他信息</div>
        <el-form-item label="营业日期">
          <el-form-item prop="businessDate">
            <el-date-picker
              class="select_width"
              v-model="form.businessDate"
              type="datetimerange"
              unlink-panels="true"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="营业时段">
          <el-time-picker
            class="select_width"
            is-range
            v-model="form.businessTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-form-item>
        <el-form-item class="form_other" label="其他信息">
          <div class="other_item">Wifi</div>
          <div class="other_item active">停车位</div>
          <div class="other_item">包间</div>
        </el-form-item>
        <el-form-item class="form_submit" label-width="0">
          <el-button class="submit_btn" type="primary" @click="submitForm('form')">立即创建</el-button>
        </el-form-item>
        <div class="form_mark">入驻过程中，如有问题可拨打400-100-111</div>
      </el-form>
    </div>
    <!-- 地图弹窗 -->
    <el-dialog title="高德地图" :visible.sync="mapVisible" width="60%">
      <div class="dialog_content">
        <div class="map_operation">
          <el-cascader
            size="large"
            :options="areaOptions"
            v-model="selectedArea"
            @change="areaChange"
          ></el-cascader>
          <el-form label-width="150px">
            <el-form-item label="地址">
              <el-input type="text" v-model="marker[0].address" @keyup.enter.native="mapkeydown"></el-input>
            </el-form-item>
            <el-button type="primary" @click="confirmAddress">保存</el-button>
          </el-form>
        </div>
        <el-amap
          vid="amapDemo"
          :zoom="zoom"
          :center="center"
          :events="events"
          style="width: 100%;height: 500px;"
        >
          <el-amap-marker
            vid="component-marker"
            :position="marker[0].position"
            :draggable="true"
            :label="marker[0].label"
          ></el-amap-marker>
        </el-amap>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      action: "",
      imgVisible: false,
      mapVisible: false,
      previewImg: "", //图片预览
      areaOptions: regionDataPlus, //省市区三级联动
      selectedArea: [], //省市区model
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            },
            {
              value: "daohang",
              label: "导航"
            }
          ]
        }
      ],
      form: {
        name: "",
        phone: "",
        shopname: "",
        address: "",
        locationX: "",
        locationY: "",
        category: "",
        businessDate: "",
        businessTime: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }]
      },
      mapSearch: "",
      geocoder: {}, //高德地图地址对象
      zoom: 14, //地图参数
      center: [114.421704, 30.480651],
      events: {},
      marker: [   //点坐标
        {
          position: [114.421704, 30.480651],
          address: "",
          label: {
            content: "选中位置",
            offset: [-20, -25]
          }
        }
      ],
      oldMobile: ""
    }
  },
  methods: {
    imgSuccess() {    //照片上传成功
      
    },
    imgRemove() {    //照片上移除

    },
    submitForm() {    //提交
      this.$router.push({ path: "/shopInfo" });
    },
    getMap() {    //高德地图初始化
      this.events = {
        init: o => {
          let center = o.getCenter();
          this.center = [center.lng, center.lat];
          this.marker[0].position = this.center;
          this.marker[0].address = this.form.address;
          this.geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
        },
        click: (eventName, handler, context) => {
          this.marker[0].position = [
            eventName.lnglat.lng,
            eventName.lnglat.lat
          ];
          this.getAddress(this.marker[0].position);
        }
      };
    },
    getAddress(position) {   //坐标转换为地址
      this.geocoder.getAddress(position, (status, result) => {
        let regeocode = result.regeocode;
        this.marker[0].address = regeocode.formattedAddress;
        this.getAreaCode(regeocode);
      });
    },
    getLocation(addr, flag) {   //地址转换为坐标
      this.geocoder.getLocation(addr, (status, result) => {
        let location = result.geocodes[0].location;
        this.center = [location.lng, location.lat];
        if (flag) this.marker[0].position = [location.lng, location.lat];
        this.getAreaCode(result.geocodes[0]);
      });
    },
    getAreaCode(regeocode) {     //区域转code
      let addressComponent = regeocode.addressComponent,
        province = {},
        city = {},
        district = {};
      province = TextToCode[addressComponent.province];
      if (
        addressComponent.city == "" ||
        addressComponent.province == addressComponent.city
      )
        addressComponent.city = "市辖区";
      city = province[addressComponent.city];
      if (addressComponent.district == "") {
        this.selectedArea = [province.code, "", ""];
      } else {
        district = city[addressComponent.district];
        this.selectedArea = [province.code, city.code, district.code];
      }
    },
    areaChange(value) {    //获取省市区code
      let address = "";
      if (value.length < 2) return false;
      value.forEach((e, i) => {
        address += CodeToText[e];
      });
      this.marker[0].address = address;
      this.getLocation(address, false);
    },
    mapkeydown() {   //地图输入框回车时间
      this.marker[0].address && this.getLocation(this.marker[0].address, true);
    },
    confirmAddress() {   //保存地址
      if (this.marker[0].address) {
        this.form.address = this.marker[0].address;
        this.geocoder.getLocation(this.form.address, (status, result) => {
          let location = result.geocodes[0].location;
          this.form.locationX = location.lng;
          this.form.locationY = location.lat;
        });
        this.$message.success("保存成功");
        this.mapVisible = false;
      } else {
        this.$message.warning("地址不能为空");
      }
    }
  },
  mounted() {
    this.getMap();
  }
}
</script>

<style scoped lang="scss">
.settle_form {
  width: 100%;
  padding-bottom: 110px;
  .set_form {
    width: 100%;
    height: auto;
    padding: 0 90px;
    text-align: left;
    .el-form {
      width: 100%;
      .form_tit {
        margin: 50px 0 30px 0;
        color: #262626;
        font-weight: 600;
      }
      .input_width {
        width: 50%;
      }
      .select_width {
        width: 100%;
      }
      .form_address {
        position: relative;
        .addr_icon {
          position: absolute;
          right: 6px;
          top: 7px;
          font-size: 32px;
          color: #3881f8;
          cursor: pointer;
        }
      }
      .form_other {
        .other_item {
          display: inline-block;
          padding: 0 24px;
          border: 1px solid #e8e8e8;
          border-radius: 4px;
          color: #666666;
          font-size: 18px;
          margin-right: 32px;
          cursor: pointer;
          &.active {
            color: #3881f8;
            border-color: #3881f8;
          }
        }
      }
      .form_submit {
        width: 100%;
        text-align: center;
      }
      .form_mark {
        font-size: 16px;
        color: #777777;
        text-align: center;
        margin-bottom: 40px;
      }
    }
  }
}
.dialog_content {
  .map_operation {
    display: flex;
    .el-cascader {
      height: 46px;
      line-height: 46px;
    }
    .el-form {
      display: flex;
      .el-button {
        height: 46px;
        line-height: 46px;
        margin-left: 20px;
      }
    }
  }
}
</style>